<template>
    <div>
        <div>
            <div style="display: flex; margin-bottom: 10px; border: 1px saddlebrown solid" v-for="(item, index) in allMessages" :key="index">
                <div style="border: 1px red solid; margin-left: auto;margin-right: 10%;" v-if="item.role === 'user'">
                    <span id="userMsg">
                        {{ item.content }}
                    </span>
                </div>

                <div style="border: 1px green solid; margin-right: auto;margin-left: 10%;" v-else>
                    <img style="width: 30px; height: 30px;" src="@/assets/logo1.png" alt="logo" />
                    <span id="aiMsg">
                        {{ item.content }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            allMessages: [
                {
                    role: 'user',
                    content: '你好'
                },
                {
                    role: 'ai',
                    content: '你好,有什么问题吗？'
                }
            ],
            message: '',
            answer: ''
        }
    }
}
</script>

<style scoped>
#userMsg {
    text-align: right;
    display: block;
    height: 40px;
    line-height: 40px;
    background-color: #E0DFFF;
    border-radius: 10px;
    padding: 0 10px;
}

#aiMsg {
    text-align: left;
    display: inline-block;
    line-height: 40px;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 10px;
}
</style>